@import "./iconFont/iconfont.css";

:root{
    --yong-ui-block01: #242424;
    --yong-ui-block02: #3e3f3f;
    --yong-ui-block03: #626566;
    --yong-ui-block04: #979a9c;
    --yong-ui-block05: #cfd5d8;
}
.echart-box{
    --yong-color1: #1ab2f3;
    --yong-color2: #ffce2b;
    --yong-color3: #4043fb;
    --yong-color4: #62f31a;
    --yong-color5: #f31ac0;
    --yong-color6: #f3911a;
    --yong-color7: #9c1af3;
    --yong-color8: #cff31a;
    --yong-color9: #f31a5b;
    --yong-color10: #1a95f3;
    --yong-color11: #1af3b9;
    --yong-color12: #9271f6;
}
.ui-echart .axis{
    stroke:rgb(162, 163, 164);
    stroke-width:1px;
}
.ui-echart .axis-arrow{
    fill: rgb(162, 163, 164);
}
.ui-echart .f12{
    font-size: 12px;
}
.ui-echart .fill0{
    fill:var(--yong-color1);
}
.ui-echart .fill1{
    fill:var(--yong-color2)
}
.ui-echart .fill2{
    fill:var(--yong-color3)
}
.ui-echart .fill3{
    fill:var(--yong-color4)
}
.ui-echart .fill4{
    fill:var(--yong-color5)
}
.ui-echart .fill5{
    fill:var(--yong-color6)
}
.ui-echart .fill6{
    fill:var(--yong-color7)
}
.ui-echart .fill7{
    fill:var(--yong-color8)
}
.ui-echart .fill8{
    fill:var(--yong-color9)
}
.ui-echart .polyline{
    stroke-width:2px;
    transition: .2s;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1500;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out forwards;
}
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1500;
    }
    100%{
        stroke-dasharray: 1500, 1500;
    }
}

.ui-echart .polyline:hover{
    stroke-width:4px;
}
.ui-echart .polyline0{
    stroke:var(--yong-color12)
}
.ui-echart .polyline1{
    stroke:var(--yong-color11)
}
.ui-echart .polyline2{
    stroke:var(--yong-color10)
}
.ui-echart .polyline3{
    stroke:var(--yong-color9)
}
.ui-echart .polyline4{
    stroke:var(--yong-color8)
}
.ui-echart .polyline5{
    stroke:var(--yong-color7)
}
.ui-echart .polyline6{
    stroke:var(--yong-color6)
}
.ui-echart .polyline7{
    stroke:var(--yong-color5)
}
.ui-echart .polyline8{
    stroke:var(--yong-color4)
}
.ui-echart .bar-bg{
    fill: #7f939a;
    transition: .3s;
    opacity: 0;
}
.ui-echart .bar-bg:hover{
    opacity: 0.1;
}
.bar-line-box .detail-box h4{
    margin-bottom: 8px;
}
.bar-line-box .detail-box span{
    padding: 0 15px;
}
.bar-line-box #detail{
    position: absolute;
    background: #fff;
    transition: .1s;
    padding: 15px;
    box-shadow: 0 0 10px #dddfe1;
    border-radius: 6px;
    display: inline-block;
    line-height: 26px;
    white-space: nowrap;
}
.bar-line-box .label-line, .bar-line-box .label-bar{
    position: relative;
}
.bar-line-box .label-line::before, .bar-line-box .label-bar::before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 10px;
}
.bar-line-box .label-bar0::before{
    background: var(--yong-color1);
}
.bar-line-box .label-bar1::before{
    background: var(--yong-color2);
}
.bar-line-box .label-bar2::before{
    background: var(--yong-color3);
}
.bar-line-box .label-bar3::before{
    background: var(--yong-color4);
}
.bar-line-box .label-bar4::before{
    background: var(--yong-color5);
}
.bar-line-box .label-bar5::before{
    background: var(--yong-color6);
}
.bar-line-box .label-bar6::before{
    background: var(--yong-color7);
}
.bar-line-box .label-bar7::before{
    background: var(--yong-color8);
}
.bar-line-box .label-bar8::before{
    background: var(--yong-color9);
}
.bar-line-box .label-bar9::before{
    background: var(--yong-color10);
}
.bar-line-box .label-bar10::before{
    background: var(--yong-color11);
}
.bar-line-box .label-bar11::before{
    background: var(--yong-color12);
}
.bar-line-box .label-line-i::after{
  content: '';
  width: 16px;
  height: 2px;
  background: #818385;
  top: 9px;
  left: -4px;
  position: absolute;
  z-index: 1;
}
.bar-line-box .label-line0::before, .bar-line-box .label-line0::after{
    background: var(--yong-color12);
}
.bar-line-box .label-line1::before, .bar-line-box .label-line1::after{
    background: var(--yong-color11);
}
.bar-line-box .label-line2::before, .bar-line-box .label-line2::after{
    background: var(--yong-color10);
}
.bar-line-box .label-line3::before, .bar-line-box .label-line3::after{
    background: var(--yong-color9);
}
.bar-line-box .label-line4::before, .bar-line-box .label-line4::after{
    background: var(--yong-color8);
}
.bar-line-box .label-line5::before, .bar-line-box .label-line5::after{
    background: var(--yong-color7);
}
.bar-line-box .label-line6::before, .bar-line-box .label-line6::after{
    background: var(--yong-color6);
}
.bar-line-box .label-line7::before, .bar-line-box .label-line7::after{
    background: var(--yong-color5);
}
.bar-line-box .label-line8::before, .bar-line-box .label-line8::after{
    background: var(--yong-color4);
}
.bar-line-box .label-line9::before, .bar-line-box .label-line9::after{
    background: var(--yong-color3);
}
.bar-line-box .label-line10::before, .bar-line-box .label-line10::after{
    background: var(--yong-color2);
}
.bar-line-box .label-line11::before, .bar-line-box .label-line11::after{
    background: var(--yong-color1);
}
.bar-line-box .label-list{
    display: flex;
    justify-content: center;
}
.bar-line-box .label-bar-i, .bar-line-box .label-line-i{
    padding-left: 16px;
    margin: 0 10px;
}
.bar-line-box .label-bar-i::before{
    width: 12px;
    height: 8px;
    border-radius: 3px;
    top: 6px;
}
.bar-line-box .label-line-i::before{
    top: 6px;
    width: 8px;
    height: 8px;
    top: 6px;
    z-index: 2;
}

.bar-line-box{
    display: inline-block;
    position: relative;
}
.bar-line-box .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.echart-box{
    display: inline-block;
}
.echart-box .title-chart{
    line-height: 46px;
    font-size: 20px;
    text-align: center;
}
#uiBigTab {
    width: 100%;
    /* display: block; */
    border-collapse: collapse;
    border: none;
    color: #454448
}
#uiBigTab .big_tb_th{
    width: 100%;
    border-collapse: separate
}
#uiBigTab .big_tb_tr_td{
    padding: 10px;
    border: 1px solid #ebeef5;
    border-collapse: separate;
}
#uiBigTab .big_tb_body{
    background-color: #ffffff;
    border-collapse: separate;
    transition: background-color .3s;
}
#uiBigTab .big_tb_body:hover{
    background-color: #f5f7fa;
}
.t_body_ui{
    height: 200px;
    overflow: auto;
}
#uiThead{
    font-weight: 600;
}